{
 "metadata": {
  "kernelspec": {
   "codemirror_mode": {
    "name": "python",
    "version": 2
   },
   "display_name": "Python 2",
   "language": "python",
   "name": "python2"
  },
  "name": "",
  "signature": "sha256:e43b317d6c615b85bd815b3cc62a3f6eb1f026caea5b9f518d55c091bb175aa2"
 },
 "nbformat": 3,
 "nbformat_minor": 0,
 "worksheets": [
  {
   "cells": [
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "# Testing Vispy.js in the notebook"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "import numpy as np"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "We load the vispy.js library in the notebook."
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "%%javascript\n",
      "require.config({\n",
      "    paths: {\n",
      "        \"jquery-mousewheel\": \"//cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.11/jquery.mousewheel.min\",\n",
      "    }\n",
      "});\n",
      "if (window.vispy == undefined) {\n",
      "    $.getScript(\"/files/vispy.js/dist/vispy.min.js\", function () {\n",
      "        require([\"vispy\", \"jquery-mousewheel\"], function(vispy){\n",
      "            console.log(\"Vispy loaded.\");\n",
      "            window.vispy = vispy;\n",
      "        });\n",
      "    });\n",
      "}"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "IPython imports."
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "from IPython.html import widgets\n",
      "from IPython.display import display_javascript, HTML\n",
      "from IPython.utils.traitlets import Unicode\n",
      "from tornado.ioloop import PeriodicCallback"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "We create the widget, Python side."
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "class VispyWidget(widgets.DOMWidget):\n",
      "    _view_name = Unicode('VispyView', sync=True)\n",
      "    \n",
      "    def change_color(self):\n",
      "        col = list(np.random.rand(3))\n",
      "        self.send({'color': col})"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "Now, the widget JavaScript side."
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "%%javascript\n",
      "function update(c, color) {\n",
      "    c.on_paint(function(event) {\n",
      "        this.call(['FUNC', 'clearColor', \n",
      "                   color[0], color[1], color[2], 1]);\n",
      "        this.call(['FUNC', 'clear',\n",
      "                   'COLOR_BUFFER_BIT | DEPTH_BUFFER_BIT']);\n",
      "    });\n",
      "    c.initialize();\n",
      "    c.paint();\n",
      "}\n",
      "\n",
      "require([\"widgets/js/widget\", \"widgets/js/manager\"],\n",
      "function(widget, manager){\n",
      "    var VispyView = IPython.DOMWidgetView.extend({\n",
      "        render: function(){ \n",
      "\n",
      "            var canvas = $('<canvas></canvas>');\n",
      "            canvas.css('width', '500px').css('height', '200px');\n",
      "            this.$el.append(canvas);\n",
      "\n",
      "            var c = vispy.init(canvas);\n",
      "            this.c = c;\n",
      "            \n",
      "            c.on_mouse_move(function(event) {\n",
      "                // Get the normalized mouse position.\n",
      "                var u = event.pos[0] / this.width;\n",
      "                var v = event.pos[1] / this.height;\n",
      "                update(c, [u, v, 0]);\n",
      "            });\n",
      "            \n",
      "            update(c, (0, 0, 0));\n",
      "        },\n",
      "        \n",
      "        on_msg: function(msg) {\n",
      "            var color = msg.color;\n",
      "            update(this.c, color);\n",
      "        }\n",
      "    });\n",
      "\n",
      "    IPython.WidgetManager.register_widget_view('VispyView', VispyView);\n",
      "});"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "w = VispyWidget()\n",
      "w"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "def f():\n",
      "    print(\"hello\")\n",
      "pc = PeriodicCallback(w.change_color, 100,)"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "pc.start()"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "pc.stop()"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    }
   ],
   "metadata": {}
  }
 ]
}